<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>MES登录</title>
    <link rel="stylesheet" type="text/css" href="/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/css/login.css"/>
</head>

<body>
<div class="m-login-bg">
    <div class="m-login">
        <h3>MES系统登录</h3>
        <div class="m-login-warp">
            <form class="layui-form">
                <div class="layui-form-item">
                    <input type="text" name="userNum" required lay-verify="required" placeholder="用户名"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <input type="text" name="passWord" required lay-verify="required" placeholder="密码"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" name="verity" required lay-verify="required" placeholder="验证码"
                               autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <img src="http://localhost:8080/code/getCode" class="yanz_img" onclick="changeyanz($(this));"/>
                        </input>
                        <!--<img class="verifyImg" onclick="this.src=this.src+'?c='+Math.random();"-->
                             <!--src="/admin/images/login/yzm.jpg"/>-->
                    </div>
                </div>
                <div class="layui-form-item m-login-btn">
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="login">登录</button>
                    </div>
                    <div class="layui-inline">
                        <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                    </div>
                </div>
            </form>
        </div>
        <p class="copyright">Copyright 2020-2021 by XIAODU</p>
    </div>
</div>
<script src="/admin/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer;
        $ = layui.jquery;
        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            },
            // userNum: [/^/[0-9]/$, '用户名为纯数字的职工编号'],
            password: [/(.+){6,12}$/, '密码必须6到12位'],
            verity: [/(.+){6}$/, '验证码必须是6位'],

        });


        //监听提交
        form.on('submit(login)', function (data) {
            var userNum = data.field.userNum;
            var passWord = data.field.passWord;
            var code = data.field.verity;
            $.ajax({
                type: "post",
                data: {userNum: userNum, passWord: passWord,code:code},
                url: "http://localhost:8080/login/login",
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert("系统异常，请联系管理员!");
                },
                success: function (data) {
                    if (data.status == 0) {
                        location.href = "/admin/index/index.html";
                    } else {
                        layer.alert(data.message, {
                            skin: 'layui-layer-molv' //样式类名  自定义样式
                            , closeBtn: 1    // 是否显示关闭按钮
                            , anim: 1 //动画类型
                            , icon: 6    // icon
                        });
                    }
                }
            });
            return false;
        });

    });

    function changeyanz(obj){
        obj.attr("src","http://localhost:8080/code/getCode");
    }
</script>
</body>

</html>